<template>
	<transition name="foodmove">
		<div class="food" v-show="showFlag" ref="foods">
			<div class="food-inner">
				<div class="image-header">
					<img :src="food.image">
					<!--返回按钮-->
					<div class="back" @click="hideFood">
						<i class="icon-arrow_lift"></i>
					</div>
				</div>
				<div class="content">
					<h1 class="title">{{food.name}}</h1>
					<!--食品详情-->
					<div class="detail">
						<span class="sell-count">月售{{food.sellCount}}份</span>
						<span class="rating">好评率{{food.rating}}%</span>
					</div>
					<!--食品价格-->
					<div class="price">
						<span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
					</div>
					<div class="cartcontrol-wrapper">
						<cartcontrol :food="food"></cartcontrol>
					</div>
					<!--加入购物车-->
					<transition name="fade">
						<div @click.stop.prevent="addCart" class="buy" v-show="!food.count||food.count===0">
							加入购物车</div>
					</transition>
				</div>
				<!--分隔栏-->
				<split v-show="food.info"></split>
				<!--商品介绍-->
				<div class="info" v-show="food.info">
					<h1 class="title">商品介绍</h1>
					<p class="text">{{food.info}}</p>
				</div>
				<!--分隔栏-->
				<split></split>
				<!--商品评价-->
				<div class="rating">
					<h1 class="title">商品评价</h1>
					<ratingselect :select-type="selectType" :only-content="onlyContent"
					              :desc="desc" :ratings="food.ratings"
					></ratingselect>
				</div>
				<!--评价列表-->
				<div class="rating-wrapper">
					<!--当存在ratings数组 , 并且数组不会空时显示这个列表-->
					<ul v-show="food.ratings && food.ratings.length">
						<li v-show="needShow(rating.rateType,rating.text)"
						    v-for="rating in food.ratings"
						    class="rating-item border-1px">
							<div class="user">
								<span class="name">{{rating.username}}</span>
								<img :src="rating.avatar" class="avatar" width="12" height="12">
							</div>
							<div class="time">{{rating.rateTime | datefmt}}</div>
							<p class="text">
								<i :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></i>{{rating.text}}
							</p>
						</li>
					</ul>
					<!--当不存在ratings数组, 或者数组为0时 , 显示这个div-->
					<div class="no-rating" v-show="!food.ratings || !food.ratings.length">
						暂无评论
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script type="text/ecmascript-6">
	import {datefmt} from 'common/js/date'
    import BScroll from 'better-scroll';
    import Vue from 'vue';
    import cartcontrol from 'components/cartcontrol/cartcontrol';
    import split from 'components/split/split';
    import ratingselect from 'components/ratingselect/ratingselect';

    const POSITIVE = 0;//正向评价
    const NEGATIVE = 1;//负面评价
    const ALL = 2;//全部评价
    
	export default {
	    props:{
	        food:{
	            type:Object
	        }
	    },
		data() {
	      return {
	          showFlag :false,
		      //显示全部评价
		      selectType:ALL,
		      //显示有内容的评价
		      onlyContent: true,
		      //评论分类
		      desc: {
	              all:'全部',
			      positive:'推荐',
			      negative:'吐槽'
		      }
	      }
		},
		methods:{
	        //显示食物详情页
	        showFood() {
	            //初始化状态
	            this.showFlag = true;
	            this.selectType=ALL;
	            this.onlyContent=true;
	            
	            this.$nextTick(() => {
	                if(!this.foodscroll){
	                    this.foodscroll=new BScroll(this.$refs.foods,{
	                        click:true
	                    })
	                }else{
	                    this.foodscroll.refresh();
	                }
	            })
	        },
			//加入购物车
			addCart(event){
	            if(!event._constructed){
	                return;
	            };
	            //设置对象的属性
	            Vue.set(this.food,'count',1);
                //this.$root.eventHub.$emit('cart.add',event.target);
                this.$emit('ball',event.target)
			},
			//返回按钮
			hideFood() {
                this.showFlag = false;
			},
			//选择要显示的评论
			needShow(type,text) {
			    //评论类型
				//text:是否显示有内容的评论
				if(this.onlyContent && !text){ //判断是否显示内容, 并没有内容
				    return false;
				}
				if(this.selectType === ALL){
				    return true;
				}else{
				    return type ===this.selectType;
				}
			}
		},
		created() {
            this.$root.eventHub.$on('ratingtype.select', type => {
               this.selectType = type;
               this.$nextTick(()=>{
                   this.foodscroll.refresh();
               })
        });
            this.$root.eventHub.$on('content.toggle', onlyCont => {
                this.onlyContent = onlyCont;
	            this.$nextTick(()=>{
	                this.foodscroll.refresh();
	        })
        });
		},
        components: {
            cartcontrol,
			split,
            ratingselect
        }
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin";
	
	.food
		position:fixed
		left:0
		top:0
		bottom:48px //底部还有购物车
		z-index:49
		width: 100%
		background: #fff
		.image-header
			position: relative
			width: 100%
			height: 0
			padding-top:100%
			img
				position: absolute
				left: 0
				top: 0
				width: 100%
				height: 100%
			.back
				position: absolute
				top: 10px
				left: 0
				.icon-arrow_lift
					display: block
					padding: 10px
					font-size: 20px
					color: #fff
		.content
			padding: 18px
			position: relative
			.title
				line-height: 14px
				margin-bottom: 8px
				font-size: 14px
				font-weight: 700
				color: rgb(7, 17, 27)
			.detail
				margin-bottom :18px
				height: 10px
				line-height: 10px
				font-size:0
				.sell-count,.rating
					font-size: 10px
					color: rgb(147,153,159)
				.sell-count
					margin-right: 12px
			.price
				font-weight:700
				line-height: 24px
				.now
					margin-right: 8px
					font-size: 14px
					color:rgb(240,20,20)
				.old
					text-decoration :line-through
					font-size:10px
					color:rgb(147,153,159)
			.cartcontrol-wrapper
				position: absolute
				right: 12px
				bottom: 12px
			.buy
				position: absolute
				right: 18px
				bottom: 18px
				z-index :10
				height: 24px
				line-height: 24px
				padding:0 12px
				box-sizing:border-box
				border-radius :12px
				font-size: 10px
				color:#fff
				background: rgb(0,160,220);
		.info
			padding: 18px
			.title
				line-height: 14px
				margin-left:18px
				font-size: 14px
				color:rgb(7,17,27)
			.text
				line-height: 24px
				padding:0 8px
				font-size: 12px
				color:rgb(77,85,93)
		.rating
			padding-top: 18px
			.title
				line-height: 14px
				margin-left: 18px
				font-size: 14px
				color:rgb(7,17,27)
		.rating-wrapper
			padding:0 18px
			.rating-item
				position: relative
				padding:16px 0
				border-1px(rgba(7,17,27,0.1))
				.user
					position: absolute
					right: 0
					top: 16px
					line-height: 12px
					font-size:0
					.name
						display: inline-block
						vertical-align: top
						margin-right: 6px
						font-size: 10px
						color: rgb(147, 153, 159)
					.avatar
						border-radius:50%
				.time
					margin-bottom: 6px
					line-height: 12px
					font-size: 10px
					color: rgb(147, 153, 159)
				.text
					line-height: 16px
					font-size: 12px
					color: rgb(7,17,27)
					.icon-thumb_up,.icon-thumb_down
						margin-right: 4px
						line-height: 16px
						font-size: 12px
					.icon-thumb_up
						color: rgb(0,160,220)
					.icon-thumb_down
						color: rgb(147, 153, 159)
					
					
			.no-rating
				padding:16px 0
				font-size: 12px
				color:rgb(147,153,159)
	/*food从右向左滑*/
	.foodmove-enter-active , .foodmove-leave-active
		transition : all 0.2s linear
	.foodmove-enter, .foodmove-leave-active
		transform :translate3d(100%,0,0)
	/*加入购物车按钮渐渐隐藏*/
	.fade-enter-active , .fade-leave-active
		transition : all 0.2s
	.fade-enter, .fade-leave-active
		opacity:0
	
		
</style>